<template>
    <div class="my-box">
        <el-button type="primary" @click="showDialog">编辑</el-button>
        <!-- 已关联列表 -->
        <div>
            <el-tag @close="delGjc(tag.id)" style="margin:0 10px 0 0;" v-for="tag in selectList" :key="tag.id" closable>
                {{ tag.name }}
            </el-tag>
        </div>
        <!-- 弹窗 -->
        <el-dialog v-model="dialogVisible" :show-close="false" width="1300" top="50px">
            <!-- 回显 -->
            <el-card class="dialog-card">
                <template #header>
                    <div class="flex-align">
                        <div class="flex1">已选列表</div>
                        <div>
                            <el-button type="primary" @click="resetAll">清空</el-button>
                        </div>
                    </div>
                </template>
                <div>
                    <el-tag @close="delGjc(tag.id)" style="margin:0 10px 0 0;" v-for="tag in selectList" :key="tag.id"
                        closable>
                        {{ tag.name }}
                    </el-tag>
                </div>
            </el-card>
            <!-- 回显 -->
            <el-card class="dialog-card" style="margin-top: 20px;">
                <template #header>
                    <div class="flex-align">
                        <div class="flex1">待选列表</div>
                        <div>
                            <el-form :inline="true" :model="formData" class="demo-form-inline">
                                <!-- <el-form-item label="属性选择" prop="property">
                                    <el-select class="w240" v-model="formData.property" placeholder="请选择属性选择" clearable>
                                        <el-option :label="key" :value="value"
                                            v-for="(key, value) in publicParams.GAME_TYPE" />
                                    </el-select>
                                </el-form-item> -->
                                <el-form-item label="游戏类型" prop="type" v-if="type === '1' || type === '3'">
                                    <el-select class="w240" v-model="formData.type" placeholder="请选择游戏类型" clearable>
                                        <el-option :label="key" :value="value"
                                            v-for="(key, value) in publicParams.GAME_TYPE" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="标签名称">
                                    <el-input style="width: 200px;" v-model="formData.name" placeholder="请输入标签名称"
                                        clearable />
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </template>
                <div>
                    <!-- 多选列表 -->
                    <el-checkbox-group class="checkbox-all" v-model="checkList">
                        <template v-for="(item, index) in waitingSeachList" :key="item.id">
                            <el-checkbox v-if="index >= ((pageNum - 1) * pageSize) && index <= (pageNum * pageSize)"
                                :label="item.name" :value="item.id"
                                :disabled="glStr.includes(item.id) ? true : false" />
                        </template>
                    </el-checkbox-group>
                    <!-- 分页 -->
                    <div class="dialog-page flex-center-align">
                        <el-pagination background layout="prev, pager, next" :page-size="pageSize"
                            :current-page="pageNum" :total="total" @current-change="onTableCurrentChange" />
                    </div>
                </div>
                <div class="dialog-footer flex-center-align">
                    <el-button @click="dialogVisible = false">关闭</el-button>
                    <el-button type="primary" @click="subFun">添加</el-button>
                </div>
            </el-card>
        </el-dialog>
        <!--  -->
        <!--  -->
    </div>

</template>

<script setup>
import { ref, reactive, computed, toRaw, watch, inject } from 'vue';
import { allCollection } from '@/api/collection'
import { allKeyword } from '@/api/keywords'
import { allGame } from '@/api/game'
let used = inject('used');
const publicParams = inject('publicParams')

const props = defineProps({
    //关联类型 1：关键词；2：大集合；3：游戏
    type: {
        type: String,
        default: '',
    },
    //栏目分类属性
    tagType: {
        type: [String, Number],
        default: '',
    },
    //合集类型/游戏类型 1=手游 2=h5 3=软件
    gameType: {
        type: [String, Number],
        default: '',
    },
    //已关联数据
    modelValue: {
        type: String,
        default: '',
    },
});
const emit = defineEmits(['update:modelValue']);

let glStr = ref([]); //关联字符串
//全部列表
let allList = ref([]);
let tagTypeId = ref('');//栏目分类属性
// let gameTypeId = ref('');//合集类型/游戏类型 1=手游 2=h5 3=软件
//默认设置 合集类型/游戏类型
// if (props.gameType) {
//     gameTypeId.value = props.gameType;
// }
//默认设置 栏目分类属性
if (props.tagType) {
    tagTypeId.value = props.tagType;
}
//栏目分类属性
// function setGameTypeId(id) {
//     gameTypeId.value = id;
//     resetChange()
// }
//合集类型/游戏类型
function setTagTypeId(id) {
    tagTypeId.value = id;
    resetChange()
}

//
const dialogVisible = ref(false);//是否显示弹窗
const checkList = ref([]);
/* 分页数据 */
let pageNum = ref(2);
let pageSize = ref(50);
let total = computed(() => {
    return waitingSeachList.value.length
})

/* 显示 */
function showDialog() {
    dialogVisible.value = true;
    checkList.value = glStr.value;
    onSubmit()
}
/*搜索*/
const formData = reactive({
    name: '',
    type: '',//游戏类型
})
/* 点击分页 */
function onTableCurrentChange(val) {
    pageNum.value = val;
    checkList.value = [];
}
let waitingSeachList = ref([]);//搜索待选列表
//搜索
function onSubmit() {
    pageNum.value = 1;
    waitingSeachList.value = allList.value.filter((item) => {
        //游戏
        if ((props.type == '1' || props.type == '3') && formData.type) {
            return (item.name.includes(formData.name) && item.type == formData.type);
        } else {
            return item.name.includes(formData.name);
        }
    })
}
/* 确认 */
function subFun() {
    glStr.value = used.uniqueArray([...glStr.value, ...checkList.value]);
    emit('update:modelValue', glStr.value.join(','));
}

//监听 首次回显
watch(() => props.modelValue, (newVal) => {
    if (newVal && glStr.value != newVal) {
        glStr.value = newVal.split(',').map(Number);
        checkList.value = glStr.value;
    }
}, {
    immediate: true,
});


//已选列表
let selectList = computed(() => {
    let arr = [];
    glStr.value.forEach((item) => {
        allList.value.find((item2) => {
            if (item == item2.id) {
                arr.push(item2);
            }
        })
    })
    return arr;
})
//删除关联
function delGjc(id) {
    glStr.value = glStr.value.filter((item) => {
        return item != id
    })
    checkList.value = glStr.value;
    emit('update:modelValue', glStr.value.join(','))
}

//初始化全部数据
function initAll() {
    //全部关键词
    if (props.type == '1') {
        let params = {
            // type: gameTypeId.value,//类型 1=手游 2=h5 3=软件
            tag_id: tagTypeId.value,//子栏目ID
        }
        allKeyword(params).then(res => {
            allList.value = res.data;
        })
    }
    //全部大集合
    if (props.type == '2') {
        allCollection({}).then(res => {
            allList.value = res.data
        })
    }
    //游戏
    if (props.type == '3') {
        allGame({}).then(res => {
            allList.value = res.data
        })
    }
}
initAll();


//关键词 - 分类选择后重置数据
function resetChange(id) {
    glStr.value = [];
    initAll()
}
//清空已选
function resetAll() {
    glStr.value = [];
    checkList.value = [];
    emit('update:modelValue', glStr.value.join(','))

}
defineExpose({
    resetChange,
    // setGameTypeId,
    setTagTypeId
})
</script>

<style scoped lang="scss">
.dialog-page {
    padding: 10px 0;
}

.my-box {
    .checkbox-all {
        text-align: left;

        .el-checkbox {
            min-width: 200px;
        }
    }

    :deep(.el-dialog__header) {
        display: none;
    }

    :deep(.el-card__body) {
        padding: 10px 20px;
    }

    :deep(.el-card) {
        box-shadow: none;
        border: 1px solid #f2f6fc;

        .el-card__header {
            font-weight: bold;
            padding: 5px 20px;
        }
    }
}
</style>
